<template>
  <design-dialog
      wrapClassName="dialog-images-manager"
      title="选择图标"
      :visible="visible"
      :width="960"
      @isOk="handle_confirm"
      @isCancel="handle_cancel">

    <!-- dialog-body -->
    <div style="height:50vh;overflow:auto">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="线性图标">
          <div class="link-box">
            <!--<p class="title">线性图标</p>-->
            <div class="links">
              <span @click="handleChange('icon-axph_read')" :class="{active: local_link === 'icon-axph_read'}">
                <i class="iconfont icon-axph_read"></i>icon-axph_read
              </span>
              <span @click="handleChange('icon-ht_basis_chatw')" :class="{active: local_link === 'icon-ht_basis_chatw'}">
                <i class="iconfont icon-ht_basis_chatw"></i>icon-ht_basis_chatw
              </span>
              <span @click="handleChange('icon-ht_basis_shops')" :class="{active: local_link === 'icon-ht_basis_shops'}">
                <i class="iconfont icon-ht_basis_shops"></i>icon-ht_basis_shops
              </span>
              <span @click="handleChange('icon-fontclass-gouwuche1')" :class="{active: local_link === 'icon-fontclass-gouwuche1'}">
                <i class="iconfont icon-fontclass-gouwuche1"></i>icon-fontclass-gouwuche1
              </span>
              <span @click="handleChange('icon-fontclass-shouye')" :class="{active: local_link === 'icon-fontclass-shouye'}">
                <i class="iconfont icon-fontclass-shouye"></i>icon-fontclass-shouye
              </span>
              <span @click="handleChange('icon-fontclass-fenlei')" :class="{active: local_link === 'icon-fontclass-fenlei'}">
                <i class="iconfont icon-fontclass-fenlei"></i>icon-fontclass-fenlei
              </span>
              <span @click="handleChange('icon-fontclass-tuiguang')" :class="{active: local_link === 'icon-fontclass-tuiguang'}">
                <i class="iconfont icon-fontclass-tuiguang"></i>icon-fontclass-tuiguang
              </span>
              <span @click="handleChange('icon-fontclass-huiyuanzhongxin')" :class="{active: local_link === 'icon-fontclass-huiyuanzhongxin'}">
                <i class="iconfont icon-fontclass-huiyuanzhongxin"></i>icon-fontclass-huiyuanzhongxin
              </span>

              <span @click="handleChange('icon-ht_basis_shortvedio')" :class="{active: local_link === 'icon-ht_basis_shortvedio'}"> <i class="iconfont icon-ht_basis_shortvedio"></i>icon-ht_basis_shortvedio</span><span @click="handleChange('icon-ht_list_line_system')" :class="{active: local_link === 'icon-ht_list_line_system'}"> <i class="iconfont icon-ht_list_line_system"></i>icon-ht_list_line_system</span><span @click="handleChange('icon-all_countdown')" :class="{active: local_link === 'icon-all_countdown'}"> <i class="iconfont icon-all_countdown"></i>icon-all_countdown</span><span @click="handleChange('icon-fx_canyu')" :class="{active: local_link === 'icon-fx_canyu'}"> <i class="iconfont icon-fx_canyu"></i>icon-fx_canyu</span><span @click="handleChange('icon-fx_hiabao')" :class="{active: local_link === 'icon-fx_hiabao'}"> <i class="iconfont icon-fx_hiabao"></i>icon-fx_hiabao</span><span @click="handleChange('icon-all_stopcommentsl')" :class="{active: local_link === 'icon-all_stopcommentsl'}"> <i class="iconfont icon-all_stopcommentsl"></i>icon-all_stopcommentsl</span><span @click="handleChange('icon-all_delete_1')" :class="{active: local_link === 'icon-all_delete_1'}"> <i class="iconfont icon-all_delete_1"></i>icon-all_delete_1</span><span @click="handleChange('icon-all_sign')" :class="{active: local_link === 'icon-all_sign'}"> <i class="iconfont icon-all_sign"></i>icon-all_sign</span><span @click="handleChange('icon-kc_line_fahuo')" :class="{active: local_link === 'icon-kc_line_fahuo'}"> <i class="iconfont icon-kc_line_fahuo"></i>icon-kc_line_fahuo</span><span @click="handleChange('icon-kc_line_huanhuo')" :class="{active: local_link === 'icon-kc_line_huanhuo'}"> <i class="iconfont icon-kc_line_huanhuo"></i>icon-kc_line_huanhuo</span><span @click="handleChange('icon-kc_line_order')" :class="{active: local_link === 'icon-kc_line_order'}"> <i class="iconfont icon-kc_line_order"></i>icon-kc_line_order</span><span @click="handleChange('icon-kc_line_buhuo')" :class="{active: local_link === 'icon-kc_line_buhuo'}"> <i class="iconfont icon-kc_line_buhuo"></i>icon-kc_line_buhuo</span><span @click="handleChange('icon-kc_line_locate')" :class="{active: local_link === 'icon-kc_line_locate'}"> <i class="iconfont icon-kc_line_locate"></i>icon-kc_line_locate</span><span @click="handleChange('icon-car_card')" :class="{active: local_link === 'icon-car_card'}"> <i class="iconfont icon-car_card"></i>icon-car_card</span><span @click="handleChange('icon-bc_tel')" :class="{active: local_link === 'icon-bc_tel'}"> <i class="iconfont icon-bc_tel"></i>icon-bc_tel</span><span @click="handleChange('icon-verification_psw')" :class="{active: local_link === 'icon-verification_psw'}"> <i class="iconfont icon-verification_psw"></i>icon-verification_psw</span><span @click="handleChange('icon-verification_phone')" :class="{active: local_link === 'icon-verification_phone'}"> <i class="iconfont icon-verification_phone"></i>icon-verification_phone</span><span @click="handleChange('icon-verification_code')" :class="{active: local_link === 'icon-verification_code'}"> <i class="iconfont icon-verification_code"></i>icon-verification_code</span><span @click="handleChange('icon-verification_code1')" :class="{active: local_link === 'icon-verification_code1'}"> <i class="iconfont icon-verification_code1"></i>icon-verification_code1</span><span @click="handleChange('icon-appointment_edite')" :class="{active: local_link === 'icon-appointment_edite'}"> <i class="iconfont icon-appointment_edite"></i>icon-appointment_edite</span><span @click="handleChange('icon-appointment_delete')" :class="{active: local_link === 'icon-appointment_delete'}"> <i class="iconfont icon-appointment_delete"></i>icon-appointment_delete</span><span @click="handleChange('icon-stores_staff')" :class="{active: local_link === 'icon-stores_staff'}"> <i class="iconfont icon-stores_staff"></i>icon-stores_staff</span><span @click="handleChange('icon-weixinliaotian')" :class="{active: local_link === 'icon-weixinliaotian'}"> <i class="iconfont icon-weixinliaotian"></i>icon-weixinliaotian</span><span @click="handleChange('icon-wuliu')" :class="{active: local_link === 'icon-wuliu'}"> <i class="iconfont icon-wuliu"></i>icon-wuliu</span><span @click="handleChange('icon-zuji1')" :class="{active: local_link === 'icon-zuji1'}"> <i class="iconfont icon-zuji1"></i>icon-zuji1</span><span @click="handleChange('icon-linedesign-20')" :class="{active: local_link === 'icon-linedesign-20'}"> <i class="iconfont icon-linedesign-20"></i>icon-linedesign-20</span><span @click="handleChange('icon-fenlei4')" :class="{active: local_link === 'icon-fenlei4'}"> <i class="iconfont icon-fenlei4"></i>icon-fenlei4</span><span @click="handleChange('icon-home1')" :class="{active: local_link === 'icon-home1'}"> <i class="iconfont icon-home1"></i>icon-home1</span><span @click="handleChange('icon-wuliu1')" :class="{active: local_link === 'icon-wuliu1'}"> <i class="iconfont icon-wuliu1"></i>icon-wuliu1</span><span @click="handleChange('icon-fenlei5')" :class="{active: local_link === 'icon-fenlei5'}"> <i class="iconfont icon-fenlei5"></i>icon-fenlei5</span><span @click="handleChange('icon-huiyuan2')" :class="{active: local_link === 'icon-huiyuan2'}"> <i class="iconfont icon-huiyuan2"></i>icon-huiyuan2</span><span @click="handleChange('icon-huiyuan6')" :class="{active: local_link === 'icon-huiyuan6'}"> <i class="iconfont icon-huiyuan6"></i>icon-huiyuan6</span><span @click="handleChange('icon-gouwuche2')" :class="{active: local_link === 'icon-gouwuche2'}"> <i class="iconfont icon-gouwuche2"></i>icon-gouwuche2</span><span @click="handleChange('icon-gaiicon-')" :class="{active: local_link === 'icon-gaiicon-'}"> <i class="iconfont icon-gaiicon-"></i>icon-gaiicon-</span><span @click="handleChange('icon-gaiicon-1')" :class="{active: local_link === 'icon-gaiicon-1'}"> <i class="iconfont icon-gaiicon-1"></i>icon-gaiicon-1</span><span @click="handleChange('icon-shangpin1')" :class="{active: local_link === 'icon-shangpin1'}"> <i class="iconfont icon-shangpin1"></i>icon-shangpin1</span><span @click="handleChange('icon-shouru1')" :class="{active: local_link === 'icon-shouru1'}"> <i class="iconfont icon-shouru1"></i>icon-shouru1</span><span @click="handleChange('icon-fenlei6')" :class="{active: local_link === 'icon-fenlei6'}"> <i class="iconfont icon-fenlei6"></i>icon-fenlei6</span><span @click="handleChange('icon-fenlei7')" :class="{active: local_link === 'icon-fenlei7'}"> <i class="iconfont icon-fenlei7"></i>icon-fenlei7</span><span @click="handleChange('icon-liaotian')" :class="{active: local_link === 'icon-liaotian'}"> <i class="iconfont icon-liaotian"></i>icon-liaotian</span><span @click="handleChange('icon-faxian')" :class="{active: local_link === 'icon-faxian'}"> <i class="iconfont icon-faxian"></i>icon-faxian</span><span @click="handleChange('icon-zhanghushouru')" :class="{active: local_link === 'icon-zhanghushouru'}"> <i class="iconfont icon-zhanghushouru"></i>icon-zhanghushouru</span><span @click="handleChange('icon-laba1')" :class="{active: local_link === 'icon-laba1'}"> <i class="iconfont icon-laba1"></i>icon-laba1</span><span @click="handleChange('icon-service_a')" :class="{active: local_link === 'icon-service_a'}"> <i class="iconfont icon-service_a"></i>icon-service_a</span><span @click="handleChange('icon-service_b')" :class="{active: local_link === 'icon-service_b'}"> <i class="iconfont icon-service_b"></i>icon-service_b</span><span @click="handleChange('icon-service_c')" :class="{active: local_link === 'icon-service_c'}"> <i class="iconfont icon-service_c"></i>icon-service_c</span><span @click="handleChange('icon-service_d')" :class="{active: local_link === 'icon-service_d'}"> <i class="iconfont icon-service_d"></i>icon-service_d</span><span @click="handleChange('icon-service_e')" :class="{active: local_link === 'icon-service_e'}"> <i class="iconfont icon-service_e"></i>icon-service_e</span><span @click="handleChange('icon-service_f')" :class="{active: local_link === 'icon-service_f'}"> <i class="iconfont icon-service_f"></i>icon-service_f</span><span @click="handleChange('icon-service_i')" :class="{active: local_link === 'icon-service_i'}"> <i class="iconfont icon-service_i"></i>icon-service_i</span><span @click="handleChange('icon-service_j')" :class="{active: local_link === 'icon-service_j'}"> <i class="iconfont icon-service_j"></i>icon-service_j</span><span @click="handleChange('icon-service_k')" :class="{active: local_link === 'icon-service_k'}"> <i class="iconfont icon-service_k"></i>icon-service_k</span><span @click="handleChange('icon-location')" :class="{active: local_link === 'icon-location'}"> <i class="iconfont icon-location"></i>icon-location</span><span @click="handleChange('icon-look_record')" :class="{active: local_link === 'icon-look_record'}"> <i class="iconfont icon-look_record"></i>icon-look_record</span><span @click="handleChange('icon-finger')" :class="{active: local_link === 'icon-finger'}"> <i class="iconfont icon-finger"></i>icon-finger</span><span @click="handleChange('icon-goods_collect')" :class="{active: local_link === 'icon-goods_collect'}"> <i class="iconfont icon-goods_collect"></i>icon-goods_collect</span><span @click="handleChange('icon-goods_car')" :class="{active: local_link === 'icon-goods_car'}"> <i class="iconfont icon-goods_car"></i>icon-goods_car</span><span @click="handleChange('icon-stay_send')" :class="{active: local_link === 'icon-stay_send'}"> <i class="iconfont icon-stay_send"></i>icon-stay_send</span><span @click="handleChange('icon-stay_refund')" :class="{active: local_link === 'icon-stay_refund'}"> <i class="iconfont icon-stay_refund"></i>icon-stay_refund</span><span @click="handleChange('icon-stay_receive')" :class="{active: local_link === 'icon-stay_receive'}"> <i class="iconfont icon-stay_receive"></i>icon-stay_receive</span><span @click="handleChange('icon-stay_pay')" :class="{active: local_link === 'icon-stay_pay'}"> <i class="iconfont icon-stay_pay"></i>icon-stay_pay</span><span @click="handleChange('icon-seller-del')" :class="{active: local_link === 'icon-seller-del'}"> <i class="iconfont icon-seller-del"></i>icon-seller-del</span><span @click="handleChange('icon-seller-detail')" :class="{active: local_link === 'icon-seller-detail'}"> <i class="iconfont icon-seller-detail"></i>icon-seller-detail</span><span @click="handleChange('icon-seller_phone')" :class="{active: local_link === 'icon-seller_phone'}"> <i class="iconfont icon-seller_phone"></i>icon-seller_phone</span><span @click="handleChange('icon-seller-home')" :class="{active: local_link === 'icon-seller-home'}"> <i class="iconfont icon-seller-home"></i>icon-seller-home</span><span @click="handleChange('icon-seller-car')" :class="{active: local_link === 'icon-seller-car'}"> <i class="iconfont icon-seller-car"></i>icon-seller-car</span><span @click="handleChange('icon-seller-position')" :class="{active: local_link === 'icon-seller-position'}"> <i class="iconfont icon-seller-position"></i>icon-seller-position</span><span @click="handleChange('icon-seller-time')" :class="{active: local_link === 'icon-seller-time'}"> <i class="iconfont icon-seller-time"></i>icon-seller-time</span><span @click="handleChange('icon-order')" :class="{active: local_link === 'icon-order'}"> <i class="iconfont icon-order"></i>icon-order</span><span @click="handleChange('icon-my')" :class="{active: local_link === 'icon-my'}"> <i class="iconfont icon-my"></i>icon-my</span><span @click="handleChange('icon-home')" :class="{active: local_link === 'icon-home'}"> <i class="iconfont icon-home"></i>icon-home</span><span @click="handleChange('icon-service')" :class="{active: local_link === 'icon-service'}"> <i class="iconfont icon-service"></i>icon-service</span><span @click="handleChange('icon-liwu')" :class="{active: local_link === 'icon-liwu'}"> <i class="iconfont icon-liwu"></i>icon-liwu</span><span @click="handleChange('icon-policy-remit')" :class="{active: local_link === 'icon-policy-remit'}"> <i class="iconfont icon-policy-remit"></i>icon-policy-remit</span><span @click="handleChange('icon-policy-sum')" :class="{active: local_link === 'icon-policy-sum'}"> <i class="iconfont icon-policy-sum"></i>icon-policy-sum</span><span @click="handleChange('icon-policy-nember')" :class="{active: local_link === 'icon-policy-nember'}"> <i class="iconfont icon-policy-nember"></i>icon-policy-nember</span><span @click="handleChange('icon-policy-order')" :class="{active: local_link === 'icon-policy-order'}"> <i class="iconfont icon-policy-order"></i>icon-policy-order</span><span @click="handleChange('icon-life-plane-line')" :class="{active: local_link === 'icon-life-plane-line'}"> <i class="iconfont icon-life-plane-line"></i>icon-life-plane-line</span><span @click="handleChange('icon-life-train-line')" :class="{active: local_link === 'icon-life-train-line'}"> <i class="iconfont icon-life-train-line"></i>icon-life-train-line</span><span @click="handleChange('icon-life-income')" :class="{active: local_link === 'icon-life-income'}"> <i class="iconfont icon-life-income"></i>icon-life-income</span><span @click="handleChange('icon-extension-stars')" :class="{active: local_link === 'icon-extension-stars'}"> <i class="iconfont icon-extension-stars"></i>icon-extension-stars</span><span @click="handleChange('icon-edit')" :class="{active: local_link === 'icon-edit'}"> <i class="iconfont icon-edit"></i>icon-edit</span><span @click="handleChange('icon-daituikuan')" :class="{active: local_link === 'icon-daituikuan'}"> <i class="iconfont icon-daituikuan"></i>icon-daituikuan</span><span @click="handleChange('icon-daishouhuo')" :class="{active: local_link === 'icon-daishouhuo'}"> <i class="iconfont icon-daishouhuo"></i>icon-daishouhuo</span><span @click="handleChange('icon-daifahuo')" :class="{active: local_link === 'icon-daifahuo'}"> <i class="iconfont icon-daifahuo"></i>icon-daifahuo</span><span @click="handleChange('icon-saoyisao')" :class="{active: local_link === 'icon-saoyisao'}"> <i class="iconfont icon-saoyisao"></i>icon-saoyisao</span><span @click="handleChange('icon-home-line6')" :class="{active: local_link === 'icon-home-line6'}"> <i class="iconfont icon-home-line6"></i>icon-home-line6</span><span @click="handleChange('icon-home-line')" :class="{active: local_link === 'icon-home-line'}"> <i class="iconfont icon-home-line"></i>icon-home-line</span><span @click="handleChange('icon-home-line2')" :class="{active: local_link === 'icon-home-line2'}"> <i class="iconfont icon-home-line2"></i>icon-home-line2</span><span @click="handleChange('icon-home-line3')" :class="{active: local_link === 'icon-home-line3'}"> <i class="iconfont icon-home-line3"></i>icon-home-line3</span><span @click="handleChange('icon-home-line4')" :class="{active: local_link === 'icon-home-line4'}"> <i class="iconfont icon-home-line4"></i>icon-home-line4</span><span @click="handleChange('icon-member-home1')" :class="{active: local_link === 'icon-member-home1'}"> <i class="iconfont icon-member-home1"></i>icon-member-home1</span><span @click="handleChange('icon-31saoma')" :class="{active: local_link === 'icon-31saoma'}"> <i class="iconfont icon-31saoma"></i>icon-31saoma</span><span @click="handleChange('icon-income-cash')" :class="{active: local_link === 'icon-income-cash'}"> <i class="iconfont icon-income-cash"></i>icon-income-cash</span><span @click="handleChange('icon-income-detail')" :class="{active: local_link === 'icon-income-detail'}"> <i class="iconfont icon-income-detail"></i>icon-income-detail</span><span @click="handleChange('icon-dianhua1')" :class="{active: local_link === 'icon-dianhua1'}"> <i class="iconfont icon-dianhua1"></i>icon-dianhua1</span><span @click="handleChange('icon-dingwei')" :class="{active: local_link === 'icon-dingwei'}"> <i class="iconfont icon-dingwei"></i>icon-dingwei</span><span @click="handleChange('icon-fenxiang')" :class="{active: local_link === 'icon-fenxiang'}"> <i class="iconfont icon-fenxiang"></i>icon-fenxiang</span><span @click="handleChange('icon-wancheng2')" :class="{active: local_link === 'icon-wancheng2'}"> <i class="iconfont icon-wancheng2"></i>icon-wancheng2</span><span @click="handleChange('icon-dengdaichuli')" :class="{active: local_link === 'icon-dengdaichuli'}"> <i class="iconfont icon-dengdaichuli"></i>icon-dengdaichuli</span><span @click="handleChange('icon-dingdan')" :class="{active: local_link === 'icon-dingdan'}"> <i class="iconfont icon-dingdan"></i>icon-dingdan</span><span @click="handleChange('icon-tixianjilu')" :class="{active: local_link === 'icon-tixianjilu'}"> <i class="iconfont icon-tixianjilu"></i>icon-tixianjilu</span><span @click="handleChange('icon-wodedingdan')" :class="{active: local_link === 'icon-wodedingdan'}"> <i class="iconfont icon-wodedingdan"></i>icon-wodedingdan</span><span @click="handleChange('icon-shoukuan')" :class="{active: local_link === 'icon-shoukuan'}"> <i class="iconfont icon-shoukuan"></i>icon-shoukuan</span><span @click="handleChange('icon-sousuo')" :class="{active: local_link === 'icon-sousuo'}"> <i class="iconfont icon-sousuo"></i>icon-sousuo</span><span @click="handleChange('icon-shenqing')" :class="{active: local_link === 'icon-shenqing'}"> <i class="iconfont icon-shenqing"></i>icon-shenqing</span><span @click="handleChange('icon-wodekecheng')" :class="{active: local_link === 'icon-wodekecheng'}"> <i class="iconfont icon-wodekecheng"></i>icon-wodekecheng</span><span @click="handleChange('icon-erweima')" :class="{active: local_link === 'icon-erweima'}"> <i class="iconfont icon-erweima"></i>icon-erweima</span><span @click="handleChange('icon-42baoxianxiangqing')" :class="{active: local_link === 'icon-42baoxianxiangqing'}"> <i class="iconfont icon-42baoxianxiangqing"></i>icon-42baoxianxiangqing</span><span @click="handleChange('icon-hongbaoyingxiaofenxi')" :class="{active: local_link === 'icon-hongbaoyingxiaofenxi'}"> <i class="iconfont icon-hongbaoyingxiaofenxi"></i>icon-hongbaoyingxiaofenxi</span><span @click="handleChange('icon-mendian')" :class="{active: local_link === 'icon-mendian'}"> <i class="iconfont icon-mendian"></i>icon-mendian</span><span @click="handleChange('icon-huobi')" :class="{active: local_link === 'icon-huobi'}"> <i class="iconfont icon-huobi"></i>icon-huobi</span><span @click="handleChange('icon-xing')" :class="{active: local_link === 'icon-xing'}"> <i class="iconfont icon-xing"></i>icon-xing</span><span @click="handleChange('icon-baoming')" :class="{active: local_link === 'icon-baoming'}"> <i class="iconfont icon-baoming"></i>icon-baoming</span><span @click="handleChange('icon-tuanduifenhong')" :class="{active: local_link === 'icon-tuanduifenhong'}"> <i class="iconfont icon-tuanduifenhong"></i>icon-tuanduifenhong</span><span @click="handleChange('icon-tuanduifanxian')" :class="{active: local_link === 'icon-tuanduifanxian'}"> <i class="iconfont icon-tuanduifanxian"></i>icon-tuanduifanxian</span><span @click="handleChange('icon-manefanxian')" :class="{active: local_link === 'icon-manefanxian'}"> <i class="iconfont icon-manefanxian"></i>icon-manefanxian</span><span @click="handleChange('icon-gudongfenhong')" :class="{active: local_link === 'icon-gudongfenhong'}"> <i class="iconfont icon-gudongfenhong"></i>icon-gudongfenhong</span><span @click="handleChange('icon-shouyintai')" :class="{active: local_link === 'icon-shouyintai'}"> <i class="iconfont icon-shouyintai"></i>icon-shouyintai</span><span @click="handleChange('icon-quyu')" :class="{active: local_link === 'icon-quyu'}"> <i class="iconfont icon-quyu"></i>icon-quyu</span><span @click="handleChange('icon-yduibofang')" :class="{active: local_link === 'icon-yduibofang'}"> <i class="iconfont icon-yduibofang"></i>icon-yduibofang</span><span @click="handleChange('icon-jiangli')" :class="{active: local_link === 'icon-jiangli'}"> <i class="iconfont icon-jiangli"></i>icon-jiangli</span><span @click="handleChange('icon-dianpu')" :class="{active: local_link === 'icon-dianpu'}"> <i class="iconfont icon-dianpu"></i>icon-dianpu</span><span @click="handleChange('icon-jiangli1')" :class="{active: local_link === 'icon-jiangli1'}"> <i class="iconfont icon-jiangli1"></i>icon-jiangli1</span>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="填充图标" force-render>
          <div class="link-box">
            <div class="links">
              <span @click="handleChange('icon-integral-active')" :class="{active: local_link === 'icon-integral-active'}"> <i class="iconfont icon-integral-active"></i>icon-integral-active</span><span @click="handleChange('icon-massage_clean')" :class="{active: local_link === 'icon-massage_clean'}"> <i class="iconfont icon-massage_clean"></i>icon-massage_clean</span><span @click="handleChange('icon-massage_set')" :class="{active: local_link === 'icon-massage_set'}"> <i class="iconfont icon-massage_set"></i>icon-massage_set</span><span @click="handleChange('icon-massage_assets')" :class="{active: local_link === 'icon-massage_assets'}"> <i class="iconfont icon-massage_assets"></i>icon-massage_assets</span><span @click="handleChange('icon-massage_apply')" :class="{active: local_link === 'icon-massage_apply'}"> <i class="iconfont icon-massage_apply"></i>icon-massage_apply</span><span @click="handleChange('icon-massage_msg')" :class="{active: local_link === 'icon-massage_msg'}"> <i class="iconfont icon-massage_msg"></i>icon-massage_msg</span><span @click="handleChange('icon-massage_client')" :class="{active: local_link === 'icon-massage_client'}"> <i class="iconfont icon-massage_client"></i>icon-massage_client</span><span @click="handleChange('icon-massage_order')" :class="{active: local_link === 'icon-massage_order'}"> <i class="iconfont icon-massage_order"></i>icon-massage_order</span><span @click="handleChange('icon-massage_discount')" :class="{active: local_link === 'icon-massage_discount'}"> <i class="iconfont icon-massage_discount"></i>icon-massage_discount</span><span @click="handleChange('icon-massage_trade_logistics')" :class="{active: local_link === 'icon-massage_trade_logistics'}"> <i class="iconfont icon-massage_trade_logistics"></i>icon-massage_trade_logistics</span><span @click="handleChange('icon-massage_withdrawal')" :class="{active: local_link === 'icon-massage_withdrawal'}"> <i class="iconfont icon-massage_withdrawal"></i>icon-massage_withdrawal</span><span @click="handleChange('icon-ht_operation_tag')" :class="{active: local_link === 'icon-ht_operation_tag'}"> <i class="iconfont icon-ht_operation_tag"></i>icon-ht_operation_tag</span><span @click="handleChange('icon-ht_tipicon')" :class="{active: local_link === 'icon-ht_tipicon'}"> <i class="iconfont icon-ht_tipicon"></i>icon-ht_tipicon</span><span @click="handleChange('icon-ht_show_formicon')" :class="{active: local_link === 'icon-ht_show_formicon'}"> <i class="iconfont icon-ht_show_formicon"></i>icon-ht_show_formicon</span><span @click="handleChange('icon-ht_operation_add')" :class="{active: local_link === 'icon-ht_operation_add'}"> <i class="iconfont icon-ht_operation_add"></i>icon-ht_operation_add</span><span @click="handleChange('icon-fx_haoyou')" :class="{active: local_link === 'icon-fx_haoyou'}"> <i class="iconfont icon-fx_haoyou"></i>icon-fx_haoyou</span><span @click="handleChange('icon-fx_haowuquan')" :class="{active: local_link === 'icon-fx_haowuquan'}"> <i class="iconfont icon-fx_haowuquan"></i>icon-fx_haowuquan</span><span @click="handleChange('icon-zx_map_locate1')" :class="{active: local_link === 'icon-zx_map_locate1'}"> <i class="iconfont icon-zx_map_locate1"></i>icon-zx_map_locate1</span><span @click="handleChange('icon-zx_map_local')" :class="{active: local_link === 'icon-zx_map_local'}"> <i class="iconfont icon-zx_map_local"></i>icon-zx_map_local</span><span @click="handleChange('icon-qhm_recommend')" :class="{active: local_link === 'icon-qhm_recommend'}"> <i class="iconfont icon-qhm_recommend"></i>icon-qhm_recommend</span><span @click="handleChange('icon-qhm_service')" :class="{active: local_link === 'icon-qhm_service'}"> <i class="iconfont icon-qhm_service"></i>icon-qhm_service</span><span @click="handleChange('icon-zb_goods1')" :class="{active: local_link === 'icon-zb_goods1'}"> <i class="iconfont icon-zb_goods1"></i>icon-zb_goods1</span><span @click="handleChange('icon-ht_content_goods')" :class="{active: local_link === 'icon-ht_content_goods'}"> <i class="iconfont icon-ht_content_goods"></i>icon-ht_content_goods</span><span @click="handleChange('icon-ht_content_systemmessage')" :class="{active: local_link === 'icon-ht_content_systemmessage'}"> <i class="iconfont icon-ht_content_systemmessage"></i>icon-ht_content_systemmessage</span><span @click="handleChange('icon-ht_content_tixian')" :class="{active: local_link === 'icon-ht_content_tixian'}"> <i class="iconfont icon-ht_content_tixian"></i>icon-ht_content_tixian</span><span @click="handleChange('icon-ht_flist_message')" :class="{active: local_link === 'icon-ht_flist_message'}"> <i class="iconfont icon-ht_flist_message"></i>icon-ht_flist_message</span><span @click="handleChange('icon-ht_operation_edit')" :class="{active: local_link === 'icon-ht_operation_edit'}"> <i class="iconfont icon-ht_operation_edit"></i>icon-ht_operation_edit</span><span @click="handleChange('icon-ht_operation_delete')" :class="{active: local_link === 'icon-ht_operation_delete'}"> <i class="iconfont icon-ht_operation_delete"></i>icon-ht_operation_delete</span><span @click="handleChange('icon-ht_operation_copyline')" :class="{active: local_link === 'icon-ht_operation_copyline'}"> <i class="iconfont icon-ht_operation_copyline"></i>icon-ht_operation_copyline</span><span @click="handleChange('icon-balance_changeaixinzhi')" :class="{active: local_link === 'icon-balance_changeaixinzhi'}"> <i class="iconfont icon-balance_changeaixinzhi"></i>icon-balance_changeaixinzhi</span><span @click="handleChange('icon-all_watchroot')" :class="{active: local_link === 'icon-all_watchroot'}"> <i class="iconfont icon-all_watchroot"></i>icon-all_watchroot</span><span @click="handleChange('icon-zb_all_haibao')" :class="{active: local_link === 'icon-zb_all_haibao'}"> <i class="iconfont icon-zb_all_haibao"></i>icon-zb_all_haibao</span><span @click="handleChange('icon-pm_auction_lock')" :class="{active: local_link === 'icon-pm_auction_lock'}"> <i class="iconfont icon-pm_auction_lock"></i>icon-pm_auction_lock</span><span @click="handleChange('icon-kc_wodekucun')" :class="{active: local_link === 'icon-kc_wodekucun'}"> <i class="iconfont icon-kc_wodekucun"></i>icon-kc_wodekucun</span><span @click="handleChange('icon-bc_like')" :class="{active: local_link === 'icon-bc_like'}"> <i class="iconfont icon-bc_like"></i>icon-bc_like</span><span @click="handleChange('icon-adsystem_ad_center')" :class="{active: local_link === 'icon-adsystem_ad_center'}"> <i class="iconfont icon-adsystem_ad_center"></i>icon-adsystem_ad_center</span><span @click="handleChange('icon-balance_q')" :class="{active: local_link === 'icon-balance_q'}"> <i class="iconfont icon-balance_q"></i>icon-balance_q</span><span @click="handleChange('icon-card_collect_b')" :class="{active: local_link === 'icon-card_collect_b'}"> <i class="iconfont icon-card_collect_b"></i>icon-card_collect_b</span><span @click="handleChange('icon-card_laud_b')" :class="{active: local_link === 'icon-card_laud_b'}"> <i class="iconfont icon-card_laud_b"></i>icon-card_laud_b</span><span @click="handleChange('icon-card_voice')" :class="{active: local_link === 'icon-card_voice'}"> <i class="iconfont icon-card_voice"></i>icon-card_voice</span><span @click="handleChange('icon-balance_l')" :class="{active: local_link === 'icon-balance_l'}"> <i class="iconfont icon-balance_l"></i>icon-balance_l</span><span @click="handleChange('icon-balance_a')" :class="{active: local_link === 'icon-balance_a'}"> <i class="iconfont icon-balance_a"></i>icon-balance_a</span><span @click="handleChange('icon-zizhutuiguang')" :class="{active: local_link === 'icon-zizhutuiguang'}"> <i class="iconfont icon-zizhutuiguang"></i>icon-zizhutuiguang</span><span @click="handleChange('icon-tubiao309')" :class="{active: local_link === 'icon-tubiao309'}"> <i class="iconfont icon-tubiao309"></i>icon-tubiao309</span><span @click="handleChange('icon-leimupinleifenleileibie2')" :class="{active: local_link === 'icon-leimupinleifenleileibie2'}"> <i class="iconfont icon-leimupinleifenleileibie2"></i>icon-leimupinleifenleileibie2</span><span @click="handleChange('icon-wuliuqiache2')" :class="{active: local_link === 'icon-wuliuqiache2'}"> <i class="iconfont icon-wuliuqiache2"></i>icon-wuliuqiache2</span><span @click="handleChange('icon-huiyuan11')" :class="{active: local_link === 'icon-huiyuan11'}"> <i class="iconfont icon-huiyuan11"></i>icon-huiyuan11</span><span @click="handleChange('icon-wuliuguanli')" :class="{active: local_link === 'icon-wuliuguanli'}"> <i class="iconfont icon-wuliuguanli"></i>icon-wuliuguanli</span><span @click="handleChange('icon-shangcheng2')" :class="{active: local_link === 'icon-shangcheng2'}"> <i class="iconfont icon-shangcheng2"></i>icon-shangcheng2</span><span @click="handleChange('icon-home2')" :class="{active: local_link === 'icon-home2'}"> <i class="iconfont icon-home2"></i>icon-home2</span><span @click="handleChange('icon-fenlei')" :class="{active: local_link === 'icon-fenlei'}"> <i class="iconfont icon-fenlei"></i>icon-fenlei</span><span @click="handleChange('icon-liaotianduihua')" :class="{active: local_link === 'icon-liaotianduihua'}"> <i class="iconfont icon-liaotianduihua"></i>icon-liaotianduihua</span><span @click="handleChange('icon-shangpin-')" :class="{active: local_link === 'icon-shangpin-'}"> <i class="iconfont icon-shangpin-"></i>icon-shangpin-</span><span @click="handleChange('icon-shouru')" :class="{active: local_link === 'icon-shouru'}"> <i class="iconfont icon-shouru"></i>icon-shouru</span><span @click="handleChange('icon-youhuiquan1')" :class="{active: local_link === 'icon-youhuiquan1'}"> <i class="iconfont icon-youhuiquan1"></i>icon-youhuiquan1</span><span @click="handleChange('icon-lvzhou_liaoliao')" :class="{active: local_link === 'icon-lvzhou_liaoliao'}"> <i class="iconfont icon-lvzhou_liaoliao"></i>icon-lvzhou_liaoliao</span><span @click="handleChange('icon-laba')" :class="{active: local_link === 'icon-laba'}"> <i class="iconfont icon-laba"></i>icon-laba</span><span @click="handleChange('icon-gouwuche')" :class="{active: local_link === 'icon-gouwuche'}"> <i class="iconfont icon-gouwuche"></i>icon-gouwuche</span><span @click="handleChange('icon-zhuye2')" :class="{active: local_link === 'icon-zhuye2'}"> <i class="iconfont icon-zhuye2"></i>icon-zhuye2</span><span @click="handleChange('icon-sort-full')" :class="{active: local_link === 'icon-sort-full'}"> <i class="iconfont icon-sort-full"></i>icon-sort-full</span><span @click="handleChange('icon-liaotian1')" :class="{active: local_link === 'icon-liaotian1'}"> <i class="iconfont icon-liaotian1"></i>icon-liaotian1</span><span @click="handleChange('icon-gouwuche1')" :class="{active: local_link === 'icon-gouwuche1'}"> <i class="iconfont icon-gouwuche1"></i>icon-gouwuche1</span><span @click="handleChange('icon-xiaofeijifen')" :class="{active: local_link === 'icon-xiaofeijifen'}"> <i class="iconfont icon-xiaofeijifen"></i>icon-xiaofeijifen</span><span @click="handleChange('icon-baokuan')" :class="{active: local_link === 'icon-baokuan'}"> <i class="iconfont icon-baokuan"></i>icon-baokuan</span><span @click="handleChange('icon-card_coupon')" :class="{active: local_link === 'icon-card_coupon'}"> <i class="iconfont icon-card_coupon"></i>icon-card_coupon</span><span @click="handleChange('icon-card_store')" :class="{active: local_link === 'icon-card_store'}"> <i class="iconfont icon-card_store"></i>icon-card_store</span><span @click="handleChange('icon-collect-active')" :class="{active: local_link === 'icon-collect-active'}"> <i class="iconfont icon-collect-active"></i>icon-collect-active</span><span @click="handleChange('icon-notice')" :class="{active: local_link === 'icon-notice'}"> <i class="iconfont icon-notice"></i>icon-notice</span><span @click="handleChange('icon-asset_record')" :class="{active: local_link === 'icon-asset_record'}"> <i class="iconfont icon-asset_record"></i>icon-asset_record</span><span @click="handleChange('icon-asset_a')" :class="{active: local_link === 'icon-asset_a'}"> <i class="iconfont icon-asset_a"></i>icon-asset_a</span><span @click="handleChange('icon-asset_b')" :class="{active: local_link === 'icon-asset_b'}"> <i class="iconfont icon-asset_b"></i>icon-asset_b</span><span @click="handleChange('icon-asset_c')" :class="{active: local_link === 'icon-asset_c'}"> <i class="iconfont icon-asset_c"></i>icon-asset_c</span><span @click="handleChange('icon-pay_b')" :class="{active: local_link === 'icon-pay_b'}"> <i class="iconfont icon-pay_b"></i>icon-pay_b</span><span @click="handleChange('icon-pay_d')" :class="{active: local_link === 'icon-pay_d'}"> <i class="iconfont icon-pay_d"></i>icon-pay_d</span><span @click="handleChange('icon-member-enter')" :class="{active: local_link === 'icon-member-enter'}"> <i class="iconfont icon-member-enter"></i>icon-member-enter</span><span @click="handleChange('icon-shop_car')" :class="{active: local_link === 'icon-shop_car'}"> <i class="iconfont icon-shop_car"></i>icon-shop_car</span><span @click="handleChange('icon-block')" :class="{active: local_link === 'icon-block'}"> <i class="iconfont icon-block"></i>icon-block</span><span @click="handleChange('icon-photobzhaoxiang')" :class="{active: local_link === 'icon-photobzhaoxiang'}"> <i class="iconfont icon-photobzhaoxiang"></i>icon-photobzhaoxiang</span><span @click="handleChange('icon-home-line7')" :class="{active: local_link === 'icon-home-line7'}"> <i class="iconfont icon-home-line7"></i>icon-home-line7</span><span @click="handleChange('icon-home-line1')" :class="{active: local_link === 'icon-home-line1'}"> <i class="iconfont icon-home-line1"></i>icon-home-line1</span><span @click="handleChange('icon-icon_location')" :class="{active: local_link === 'icon-icon_location'}"> <i class="iconfont icon-icon_location"></i>icon-icon_location</span><span @click="handleChange('icon-wode-wode')" :class="{active: local_link === 'icon-wode-wode'}"> <i class="iconfont icon-wode-wode"></i>icon-wode-wode</span><span @click="handleChange('icon-ai-home')" :class="{active: local_link === 'icon-ai-home'}"> <i class="iconfont icon-ai-home"></i>icon-ai-home</span><span @click="handleChange('icon-tishi')" :class="{active: local_link === 'icon-tishi'}"> <i class="iconfont icon-tishi"></i>icon-tishi</span><span @click="handleChange('icon-shezhi')" :class="{active: local_link === 'icon-shezhi'}"> <i class="iconfont icon-shezhi"></i>icon-shezhi</span><span @click="handleChange('icon-dingdan1')" :class="{active: local_link === 'icon-dingdan1'}"> <i class="iconfont icon-dingdan1"></i>icon-dingdan1</span><span @click="handleChange('icon-shoukuan1')" :class="{active: local_link === 'icon-shoukuan1'}"> <i class="iconfont icon-shoukuan1"></i>icon-shoukuan1</span><span @click="handleChange('icon-tongji')" :class="{active: local_link === 'icon-tongji'}"> <i class="iconfont icon-tongji"></i>icon-tongji</span><span @click="handleChange('icon-share')" :class="{active: local_link === 'icon-share'}"> <i class="iconfont icon-share"></i>icon-share</span><span @click="handleChange('icon-zujiantuandui')" :class="{active: local_link === 'icon-zujiantuandui'}"> <i class="iconfont icon-zujiantuandui"></i>icon-zujiantuandui</span><span @click="handleChange('icon-shuoming')" :class="{active: local_link === 'icon-shuoming'}"> <i class="iconfont icon-shuoming"></i>icon-shuoming</span><span @click="handleChange('icon-gerenzhongxin')" :class="{active: local_link === 'icon-gerenzhongxin'}"> <i class="iconfont icon-gerenzhongxin"></i>icon-gerenzhongxin</span><span @click="handleChange('icon-weitixian')" :class="{active: local_link === 'icon-weitixian'}"> <i class="iconfont icon-weitixian"></i>icon-weitixian</span><span @click="handleChange('icon-yitixian')" :class="{active: local_link === 'icon-yitixian'}"> <i class="iconfont icon-yitixian"></i>icon-yitixian</span><span @click="handleChange('icon-yujishouyi')" :class="{active: local_link === 'icon-yujishouyi'}"> <i class="iconfont icon-yujishouyi"></i>icon-yujishouyi</span><span @click="handleChange('icon-zanwushouyi')" :class="{active: local_link === 'icon-zanwushouyi'}"> <i class="iconfont icon-zanwushouyi"></i>icon-zanwushouyi</span><span @click="handleChange('icon-yijiesuan')" :class="{active: local_link === 'icon-yijiesuan'}"> <i class="iconfont icon-yijiesuan"></i>icon-yijiesuan</span><span @click="handleChange('icon-wancheng')" :class="{active: local_link === 'icon-wancheng'}"> <i class="iconfont icon-wancheng"></i>icon-wancheng</span><span @click="handleChange('icon-cuowu')" :class="{active: local_link === 'icon-cuowu'}"> <i class="iconfont icon-cuowu"></i>icon-cuowu</span><span @click="handleChange('icon-dizhi')" :class="{active: local_link === 'icon-dizhi'}"> <i class="iconfont icon-dizhi"></i>icon-dizhi</span><span @click="handleChange('icon-jiangshifenhong')" :class="{active: local_link === 'icon-jiangshifenhong'}"> <i class="iconfont icon-jiangshifenhong"></i>icon-jiangshifenhong</span><span @click="handleChange('icon-jiangshi')" :class="{active: local_link === 'icon-jiangshi'}"> <i class="iconfont icon-jiangshi"></i>icon-jiangshi</span><span @click="handleChange('icon-dianpu1')" :class="{active: local_link === 'icon-dianpu1'}"> <i class="iconfont icon-dianpu1"></i>icon-dianpu1</span><span @click="handleChange('icon-shenghuojiaofei')" :class="{active: local_link === 'icon-shenghuojiaofei'}"> <i class="iconfont icon-shenghuojiaofei"></i>icon-shenghuojiaofei</span><span @click="handleChange('icon-bofang')" :class="{active: local_link === 'icon-bofang'}"> <i class="iconfont icon-bofang"></i>icon-bofang</span><span @click="handleChange('icon-lishi')" :class="{active: local_link === 'icon-lishi'}"> <i class="iconfont icon-lishi"></i>icon-lishi</span><span @click="handleChange('icon-kefu')" :class="{active: local_link === 'icon-kefu'}"> <i class="iconfont icon-kefu"></i>icon-kefu</span><span @click="handleChange('icon-kechengzhongxin')" :class="{active: local_link === 'icon-kechengzhongxin'}"> <i class="iconfont icon-kechengzhongxin"></i>icon-kechengzhongxin</span><span @click="handleChange('icon-guanxi')" :class="{active: local_link === 'icon-guanxi'}"> <i class="iconfont icon-guanxi"></i>icon-guanxi</span><span @click="handleChange('icon-pinglun')" :class="{active: local_link === 'icon-pinglun'}"> <i class="iconfont icon-pinglun"></i>icon-pinglun</span><span @click="handleChange('icon-shoucang1')" :class="{active: local_link === 'icon-shoucang1'}"> <i class="iconfont icon-shoucang1"></i>icon-shoucang1</span><span @click="handleChange('icon-paihangbang')" :class="{active: local_link === 'icon-paihangbang'}"> <i class="iconfont icon-paihangbang"></i>icon-paihangbang</span><span @click="handleChange('icon-chongzhi')" :class="{active: local_link === 'icon-chongzhi'}"> <i class="iconfont icon-chongzhi"></i>icon-chongzhi</span><span @click="handleChange('icon-chongzhi1')" :class="{active: local_link === 'icon-chongzhi1'}"> <i class="iconfont icon-chongzhi1"></i>icon-chongzhi1</span><span @click="handleChange('icon-xiaofeifanxian')" :class="{active: local_link === 'icon-xiaofeifanxian'}"> <i class="iconfont icon-xiaofeifanxian"></i>icon-xiaofeifanxian</span><span @click="handleChange('icon-zuji')" :class="{active: local_link === 'icon-zuji'}"> <i class="iconfont icon-zuji"></i>icon-zuji</span><span @click="handleChange('icon-daqia')" :class="{active: local_link === 'icon-daqia'}"> <i class="iconfont icon-daqia"></i>icon-daqia</span><span @click="handleChange('icon-zhaoshangyuan')" :class="{active: local_link === 'icon-zhaoshangyuan'}"> <i class="iconfont icon-zhaoshangyuan"></i>icon-zhaoshangyuan</span><span @click="handleChange('icon-fenxiao')" :class="{active: local_link === 'icon-fenxiao'}"> <i class="iconfont icon-fenxiao"></i>icon-fenxiao</span><span @click="handleChange('icon-haopingfanxian')" :class="{active: local_link === 'icon-haopingfanxian'}"> <i class="iconfont icon-haopingfanxian"></i>icon-haopingfanxian</span>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

  </design-dialog>
</template>

<script>
	// 拖拽

	export default {
		name: 'icon-modal',

		props: {
			value: {
				type: String,
				default: ""
			},
			// 配置项
			config: {
				type: Object,
				required: true,
			},
			// 根配置
			rootConfig: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				str: '',
				local_link: '',
				visible: false,
			};
		},
		watch: {
			value(newVal) {
				// this.local_link = newVal;
			},
		},
		methods: {
			show () {
				this.visible = true;
			},
			/**
			 * 弹窗按钮 - 确认
			 */
			handle_confirm () {
				this.$emit('confirm', this.local_link);
				this.visible = false;
			},

			handleChange (value) {
				this.local_link = value;
			},

			/**
			 * 弹窗按钮 - 取消
			 */
			handle_cancel () {
				this.visible = false;
			},

			/**
			 * 用来转换ICON
			 */
			ChangeArr() {
				let arr = `icon-ht_basis_shortvedio
icon-ht_list_line_system
icon-all_countdown`.replace(/\s+/g,",").split(',');

				this.str = '';
				for(let i = 0;i<arr.length;i++) {
					this.str+=`<span @click="handleChange('${arr[i]}')" :class="{active: local_link === '${arr[i]}'}"> <i class="iconfont ${arr[i]}"></i>${arr[i]}</span>`
        }

        // console.log(this.str)

			},

		},
	};
</script>

<style lang="less" scoped>
  .link-box {
    margin: 10px 10px;
    .title {
      position: relative;
      font-weight: bold;
      margin-left: 10px;
      color: #29ba9c;
    }
    .title::before {
      content: "";
      width: 5px;
      height: 25px;
      position: absolute;
      top: 0;
      left: -10px;
      background: #29ba9c;
    }
    .links {
      margin-left: 15px;
      display: flex;
      flex-wrap: wrap;
      span {
        width: 150px;
        cursor: pointer;
        margin: 10px 0 0 20px;
        display: flex;
        flex-direction: column;
        text-align: center;
        i {
          font-size: 30px;
        }
      }
      span.active {
        color: #29ba9c;
      }
    }
  }

  .search-result {
    margin-top: 20px;
  }
</style>
